<template>
    <div>
        <TopSwiper :tops='tops'></TopSwiper>
        <Card v-for="book in books" :key="index" :book='book'></Card>
        <p class="text-footer" v-if="!more">拉到底啦～别拉了</p>
    </div>
</template>

<script type="text/ecmascript-6">
import { get } from '@/util'
import Card from '@/components/Card'
import TopSwiper from '@/components/TopSwiper'

export default {
  data () {
    return {
      books: [],
      tops: [],
      page: 0,
      more: true
    }
  },
  components: {
    Card,
    TopSwiper
  },
  mounted () {
    // 获取列表
    this.getList(true)

    // 获取轮播图排行榜
    this.getTop()
  },
  methods: {
    //   获取列表
    async getList (init) {
      if (init) {
        this.page = 0
        this.more = true
      }
      wx.showNavigationBarLoading()
      const books = await get('/weapp/booklist', { page: this.page })

      //   判断数据是否获取到底了
      if (books.list.length < 10 && this.page > 0) {
        this.more = false
      }

      //   是否为第一次刷新
      if (init) {
        this.books = books.list
        wx.stopPullDownRefresh()
      } else {
        this.books = this.books.concat(books.list)
      }

      wx.hideNavigationBarLoading()
    },

    // 获取轮播图排行榜
    async getTop () {
      const tops = await get('/weapp/top')
      this.tops = tops.list
    }
  },

  //   下拉刷新
  onPullDownRefresh () {
    this.getList(true)
  },

  // 触底事件
  onReachBottom () {
    if (!this.more) {
      return false
    }
    this.page = this.page + 1
    this.getList()
  }
}
</script>

<style scoped>
</style>
